<!-- 开始考试 -->
<template>
	<view>
		<view class="p-3">
			<view class="bt-block">
				<uni-transition mode-class="fade" :show="true">
					<view v-if="currentQuestion">
						<view class="flex justify-between my-3">
							<view class="left-label">{{getTypes(currentQuestion.questionType)}}</view>
							<view class="flex align-center pr-3">
								<u--image width="34rpx" height="34rpx" src="/static/images/ui/edu/clock.png"></u--image>
								<view class="font-2 font-bold">
									<uni-countdown ref="countDown" @timeup="nextQuestion" :show-day="false"
										:show-hour="false" :minute="5" :second="15" />
								</view>
							</view>
						</view>
						<view class="p-2">
							<view class="font-2 margin-bottom-lg">
								({{index+1}}/{{questions.length}}). {{currentQuestion.questionTitle}}
							</view>
							<view v-if="currentQuestion.questionType==1||currentQuestion.questionType==2">
								<view @click="selectItem(idx)" :class="['subject', checkClass(idx)?'select':'']"
									v-for="item,idx in currentQuestion.questionItem" :key="idx">
									{{idx+1}}. {{item}}
								</view>
							</view>
							<view v-else-if="currentQuestion.questionType==3">
								<view @click="selectItem(true)" class="flex align-center"
									:class="['subject', checkClass(true)?'select':'']">
									<u-icon :color="checkClass(true)?'#4cd964':'#86898c'" class="mr-2"
										name="checkmark-circle-fill"></u-icon>
									<text>正确</text>

								</view>
								<view @click="selectItem(false)" class="flex align-center"
									:class="['subject', checkClass(false)?'select':'']">
									<u-icon :color="checkClass(false)?'#ee3636':'#86898c'" class="mr-2"
										name="close-circle-fill"></u-icon>
									<text>错误</text>
								</view>
							</view>
						</view>
					</view>
					<u-empty v-else></u-empty>
				</uni-transition>
			</view>
		</view>
		<view class="bt-footer" v-if="questions.length>0">
			<view class="flex" style="width: 100%;">
				<view class="flex-1 px-2">
					<bg-btn @click="postExam" :plain="true">交卷</bg-btn>
				</view>
				<view class="flex-1 px-2">
					<bg-btn @click="nextQuestion">下一题</bg-btn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPapers,
		postPapers
	} from "@/api/system/study.js"
	export default {
		data() {
			return {
				projectId: '',
				index: 0, //当前第几题
				questions: [], //题目列表
				stop: false, //提交结果
				over: false, //所有题都做完
			}
		},
		onLoad(options) {
			this.projectId = options.projectId
		},
		mounted() {
			this.getData()
		},
		computed: {
			currentQuestion() {
				if (this.questions.length > 0) {
					return this.questions[this.index]
				} else {
					return false
				}
			}
		},
		methods: {
			getTypes(t) {
				if (t == 1) {
					return "单项选择题"
				} else if (t == 2) {
					return "多项选择题"
				} else {
					return "对错"
				}
			},
			nextQuestion() {
				if (this.questions.length - 1 > this.index) {
					this.index += 1;
					this.$refs.countDown.update()
				} else {
					this.over = true
					this.$modal.msg("已完成所有题目，请交卷")
				}
			},
			checkClass(item) {
				if (this.currentQuestion.questionType == 1) {
					if (typeof this.currentQuestion.userAnswer == 'number') {
						return this.currentQuestion.userAnswer == item
					} else {
						return false
					}

				} else if (this.currentQuestion.questionType == 2) {
					return this.currentQuestion.userAnswer.indexOf(item) > -1
				} else {
					if (typeof this.currentQuestion.userAnswer == 'boolean') {
						return this.currentQuestion.userAnswer == item
					} else {
						return false
					}
				}
			},
			selectItem(idx) {
				let cur = this.questions[this.index]
				if (cur.questionType == 2) {
					if (!cur.userAnswer) cur.userAnswer = []
					let _index = cur.userAnswer.findIndex(a => a == idx)
					if (_index >= 0) {
						cur.userAnswer.splice(_index, 1)
					} else {
						cur.userAnswer.push(idx)
					}
				} else if (cur.questionType == 3) {
					cur.userAnswer = idx
				} else {
					cur.userAnswer = idx
				}
			},
			getData() {
				getPapers(this.projectId).then(res => {
					this.obj = res
					this.questions = res.data
					this.questions.forEach(q => {
						this.$set(q, "userAnswer", '')
						q.questionItem = JSON.parse(q.questionItem)
						q.answerItem = JSON.parse(q.answerItem)
					})
				})
			},
			async postExam() {

				if (this.index != this.questions.length - 1) {
					this.$modal.msg("还有试题没有解答,请继续作答")
					return
					// uni.showModal({
					// 	title: '系统提示',
					// 	content: '还有试题没有解答，确定要结束考试吗？',
					// 	success: (res) => {
					// 		if (res.confirm) {
					// 			uni.navigateBack()
					// 		} else if (res.cancel) {
					// 			return false
					// 		}
					// 	}
					// })
				} else {
					let _questions = []
					let obj = this.questions[0]
					this.questions.forEach(q => {
						let _temp = {
							questionId: q.id
						}
						if (q.questionType != 2) {
							_temp.answerItem = q.userAnswer
						} else {
							try {
								_temp.answerItem = JSON.stringify(q.userAnswer)
							} catch (err) {
								console.log(err)
							}
						}
						_questions.push(_temp)
					})
					let _postData = {
						"projectId": obj.projectId,
						"userId": this.$store.getters.userId,
						"examId": obj.examId,
						"questionList": _questions
					}
					postPapers(_postData).then(res => {
						this.$modal.msgSuccess(res.msg)
						uni.$emit("refresh-exam", true)
						this.$tab.navigateBackDelay()
					})
				}
			}
		}
	}
</script>

<style scoped>
	.left-label {
		background-color: #ee3636;
		color: #FFFFFF;
		width: 152rpx;
		height: 54rpx;
		line-height: 54rpx;
		border-radius: 0px 28rpx 28rpx 0px;
		font-size: 24rpx;
		box-sizing: border-box;
		padding-left: 16rpx;

	}

	.subject {
		background: #fafafa;
		border-radius: 8rpx;
		color: #86898c;
		font-size: 30rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
	}

	.subject.select {
		color: #1F69FB;
	}
</style>